<!--口罩机管理-->
<template>
  <div class="operator_content commonoperator">
    <div class="react">
      <el-scrollbar style="height: 100%;">
        <p class="Toptitle">
          <img src="../../../../static/image/content_title.png" alt width="20" height="16" />
          <span>口罩机管理</span>
        </p>
        <p class="searchp">
          <el-input
            placeholder="名称 检索"
            v-model="searxh"
            clearable
            class="searchinpt"
            @input="parentData"
          ></el-input>
          <el-button class="searchadd" @click="showaddDialog">新建</el-button>
        </p>
        <!--表格 :cell-style="{background:'#00295E',color:'#fff'}"-->
        <el-table
          :data="tableData"
          style="width: 100%"
           :header-cell-style="{background:'#003983',color:'#fff',fontWeight:'normal'}"
        >
          <el-table-column prop="name" label="口罩机名称"></el-table-column>
          <el-table-column prop="mask_manufacturer" label="口罩生产商编号"></el-table-column>
          <el-table-column prop="mask_machine_model" label="口罩机型号"></el-table-column>
          <el-table-column prop="gateway" label="网关编号"></el-table-column>
          <el-table-column prop="channel" label="通道编号"></el-table-column>
          <el-table-column prop="photo" label="图片">
            <template slot-scope="scope">
              <el-tooltip placement="right" v-if="scope.row.photo">
                <div
                  slot="content"
                  style="width: 450px;height: 300px;display: flex;align-items: center;justify-content: center;background:#333;"
                >
                  <img
                    :src="JSON.parse(scope.row.photo)[0]"
                    alt="封面图"
                    style="max-width:100%; max-height:100%;"
                  />
                </div>
                <img
                  :src="JSON.parse(scope.row.photo)[0]"
                  alt="封面图"
                  style="width: auto; height:50px"
                />
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="video" label="视频">
            <template slot-scope="scope">
              <span
                style="cursor:pointer;"
                @click="playvideo(JSON.parse(scope.row.video)[0])"
              >{{JSON.parse(scope.row.video)[0]}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="do">
            <template slot-scope="scope">
              <button size="small" class="commonbut editbut" @click="showeditDialog(scope.row)">修改</button>
              <!-- <button size="small" class="commonbut deletebut">删除</button> -->
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="pageright">
          <el-pagination
            :current-page="page"
            :page-size="size"
            :page-sizes="sizes"
            :total="sum"
            @current-change="currChange"
            @size-change="sizeChange"
            layout="total, sizes, prev, pager, next, jumper"
          />
        </div>
      </el-scrollbar>
    </div>
    <!--父表新增修改dialog-->
    <typeEdit
      :dialog-form-visible="dialogFormVisible"
      :edittitle="edittitle"
      :roleform="roleform"
      @backtable="closeEdit"
      @chirldSave="saveData"
      @chirldEdit="editData"
    ></typeEdit>
    <!--播放视频-->
    <!--修改密码对话框-->
    <el-dialog
      title="视频播放"
      :visible.sync="videoVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="500px"
    >
      <video :src="playvideoSrc" class="videoclass" controls="controls"></video>
      <span slot="footer" class="dialog-footer">
        <button @click="videoVisible = false" class="dialogbutton confim">关 闭</button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import typeEdit from "./operator_mask_edit";
import { mapState, mapMutations } from "vuex";
export default {
  components: {
    typeEdit
  },
  computed: {
    ...mapState({
      token: state => state.Authorization
    })
  },
  data() {
    return {
      searxh: "",
      tableData: [],
      page: 1,
      size: 10,
      sizes: [10, 20, 30, 50],
      sum: 0,

      //父表编辑框
      dialogFormVisible: false,
      edittitle: "",
      roleform: {},
      //视频播放
      videoVisible: false,
      playvideoSrc: ""
    };
  },
  mounted() {
    this.parentData();
  },
  methods: {
    /**
     * 分页事件
     */
    currChange(curr) {
      // page页改变触发事件

      this.page = curr;
      this.initTable();
    },
    sizeChange(curr) {
      this.size = curr;
      this.initTable();
    },
    //拿表数据
    parentData() {
      var params = {
        token: this.token,
        name: this.searxh,
        pageNumber: this.page,
        pageSize: this.size
      };
      this.$http
        .get(
          `${this.$basePath}?service=App.MaskMachines.MaskMachinesList&api=193`,
          {
            params: params
          }
        )
        .then(res => {
          if (res.ret == 200) {
            console.log("生产商列表数据", res);
            this.tableData = res.data.list;
            this.sum = parseInt(res.data.total);
          } else {
            console.log(res.msg);
          }
        });
    },
    /**父表编辑 */
    /**新增框 */
    showaddDialog() {
      this.edittitle = "addData";
      this.dialogFormVisible = true;
      this.roleform = {};
    },
    showeditDialog(row) {
      this.edittitle = "updateData";
      var params = {
        token: this.token,
        id: row.id
      };
      this.$http
        .get(
          `${this.$basePath}?service=App.MaskMachines.MaskMachinesDetail&api=193`,
          { params: params }
        )
        .then(res => {
          if (res.ret == 200) {
            console.log("行详情", res);
            this.roleform = res.data;
            this.dialogFormVisible = true;
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    /**父表弹出框 */
    closeEdit() {
      // 关闭编辑框
      this.dialogFormVisible = false;
    },
    //保存添加事件
    saveData(form) {
      // 编辑、新增保存事件
      console.log("报存事件", form);
      var params = {
        token: this.token,
        name: form.name,
        mask_manufacturer: form.mask_manufacturer,
        mask_machine_model: form.mask_machine_model,
        gateway: form.gateway,
        channel: form.channel,
        photo: form.photo,
        video: form.video
      };
      this.$http
        .post(
          `${this.$basePath}?service=App.MaskMachines.AddMaskMachines&api=193`,
          params
        )
        .then(res => {
          if (res.ret == 200) {
            console.log("添加生产商", res);
            this.dialogFormVisible = false;
            this.parentData();
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    //修改当前行
    editData(form) {
      // 编辑、新增保存事件
      console.log("编辑事件", form);
      var params = {
        token: this.token,
        id: form.id,
        name: form.name,
        mask_manufacturer: form.mask_manufacturer,
        mask_machine_model: form.mask_machine_model,
        gateway: form.gateway,
        channel: form.channel,
        photo: form.photo,
        video: form.video
      };
      this.$http
        .post(
          `${this.$basePath}?service=App.MaskMachines.EditMaskMachines&api=193`,
          params
        )
        .then(res => {
          if (res.ret == 200) {
            console.log("修改分类", res);
            this.dialogFormVisible = false;
            this.parentData();
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    //播放视频
    playvideo(url) {
      console.log(url);
      this.videoVisible = true;
      this.playvideoSrc = url;
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../../assets/css/operator";

.operator_content {
  box-shadow: 0px 0px 25px 0px rgba(68, 140, 232, 0.7) inset;
  height: 100%;
}
@import "../../../assets/css/dialog";
/deep/.el-dialog__header {
  line-height: normal;
  text-align: left;
}
/deep/.el-dialog,
/deep/ .el-pager li {
  background: url(../../../../static/image/dialog_top.png) no-repeat;
  background-size: 100%100%;
  // box-shadow: 0px 0px 25px 0px rgba(68, 140, 232, 0.7) inset;
  color: #fff;
}

.videoclass {
  width: 95%;
  height: 100%;
  margin: auto;
  background: #000;
}
</style>
